<template>
  <div class="alarm-statistics">
    <div class="chart" id="alarmStatistics"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "AlarmStatistics",
  data() {
    return {
      chart: null,
      highlightTimer: null,
      currentIndex: 0
    }
  },
  methods:{
    initChart(){
      this.chart = echarts.init(document.getElementById('alarmStatistics'))
      const option={
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          boundaryGap: false,
          data:['00:00-04:00','04:00-08:00','08:00-12:00','12:00-16:00','16:00-20:00','20:00-24:00'],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:15,
          top:20,
          right:40,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
              type:'dashed'
            }
          }
        },
        color:['#FBC102'],
        series:[
          {
            name:'接警次数',
            type:'line',
            data:[3,0,5,2,4,3],
            smooth:true,
            symbolSize: 8,
            emphasis: {
              scale: true,
              scaleSize: 3,
              focus: 'series',
              itemStyle: {
                color: '#FFD700',
                borderColor: '#FFA500',
                borderWidth: 2,
                shadowColor: 'rgba(255, 215, 0, 0.5)',
                shadowBlur: 10
              },
              label: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#FFD700',
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                padding: [5, 10],
                borderRadius: 4
              }
            },
            areaStyle:{
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上到下渐变
                  [
                    { offset: 0, color: 'rgba(251,193,2,0.8)' },
                    { offset: 1, color: 'rgba(251,193,2,0.1)' }
                  ]
              )
            },
            label:{
              show:true,
              position:'top',
              color:'#fff',
              formatter(params){
                return params.value+'次'
              }
            }
          }
        ]
      }
      this.chart.setOption(option)
      
      // 开始高亮动画
      this.startHighlightAnimation()
    },
    startHighlightAnimation() {
      this.highlightTimer = setInterval(() => {
        // 取消之前的高亮
        this.chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0
        })
        
        // 高亮当前数据点
        this.chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.currentIndex
        })
        
        // 更新索引
        this.currentIndex = (this.currentIndex + 1) % 6
      }, 2000) // 每2秒切换一次
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.highlightTimer) {
      clearInterval(this.highlightTimer)
    }
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>
<style scoped lang="scss">
.alarm-statistics{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 100%;
  }
}
</style>
